<template>
	<view class="login flex u-flex-start u-flex-column align-center">
		<image src="/static/tushu.jpg" style="width: 200rpx;height: 200rpx;margin-top: 250rpx;"></image>
		<view style="color: #333333;font-size: 48rpx;font-weight: bold;margin-top: 40rpx;">
			智慧图书馆
		</view>
		<view class="inputOut flex justify-start align-center u-m-t-80">
			<up-input placeholder="请输入用户名/手机号" border="bottom" clearable v-model="name">
				<template #prefix>
					<i-icon name="ioc-renyuan" color="#4A90E2" class="more-btn" size="36rpx">
					</i-icon>
				</template>
			</up-input>
		</view>
		<view class="inputOut flex justify-start align-center u-m-t-20">
			<up-input placeholder="请输入密码" :password="true" border="bottom" clearable v-model="password">
				<template #prefix>
					<i-icon name="ioc-mima" color="#4A90E2" class="more-btn" size="36rpx">
					</i-icon>
				</template>
			</up-input>
		</view>
		<view class="flex justify-between align-center blueText">
			<text>忘记密码？</text>
			<text>立即注册</text>
		</view>
		<view class="u-m-t-44">
			<up-button type="primary" @click="login()" text="登录" class="loinbtn" shape="circle"></up-button>
		</view>
		<view class="">
			<up-divider text="其他登录方式"></up-divider>
		</view>
		<view>
			<i-icon name="ioc-weixin" color="#4A90E2"   class="more-btn u-m-r-80" size="80rpx">
			</i-icon>
			<i-icon name="ioc-phone" color="#4A90E2" class="more-btn" size="80rpx">
			</i-icon>
			
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const login = () => {
		if (!name.value) {
			uni.showToast({
				title: '请输入用户名/手机号',
				icon: 'none'
			})
			return
		}
		if (!password.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
			return
		}
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const name = ref('')
	const password = ref('')
	
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		// overflow: hidden;
	}

	.inputOut {
		width: calc(100vw - 128rpx);
		height: 98rpx;
	}
	
	.blueText{
		width: calc(100vw - 128rpx);
		color: #4A90E2;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.loinbtn{
		width: calc(100vw - 128rpx)!important;
		height: 88rpx;
	}
</style>